<template>
	<view>
		<view class="w100 flex flex_wrap flex_jc mt30">
			<view class="li w710 flex" v-for="(item,index) in list">
				<view class="bg_img">
					<u-image width="100%" height="100%" :src="item.card"></u-image>
				</view>
				<navigator :url="'/pages/kapai_detail/index?id='+item.kapai_id" class="card">
					<u--image :showLoading="true" :src="item.card" width="100%" height="100%"></u--image>
				</navigator>
				<view class="detail flex flex_ac flex_wrap">
					<view class="type w100 hidden1">{{item.danshu}}</view>
					<view class="name w100">{{item.name}}</view>
					<view class="level fz30 w100">等级:{{item.level}}</view>
				</view>
				<view class="sent flex flex_ac flex_jc">
					<button type="default" :data-index="index" open-type="share" @click="shareCard(index)" id="share" class="btn" v-if="item.times>1">赠送</button>
					<view class="btn1 btn" v-if="item.times==1">赠送</view>
					<view class="count">数量:{{item.times}}</view>
				</view>
			</view>
			<view style="margin-top: 40%;" class="u-empty-area" v-if="list.length==0">
				<u-empty text="列表为空" mode="favor"></u-empty>
			</view>
			<view v-if="list.length>0" class="tips">{{tips}}</view>
		</view>
	</view>
</template>

<script>
	import {getUkList,shareCard} from "@/api/api"
	import {randomString} from "@/utils/common.js"
	export default {
		data() {
			return {
				page:1,
				list:[],
				count:0,
				tips:'数据加载中',
				userinfo:[],
				sharecode:'',
			}
		},
		
		onReachBottom(){
			if(this.list.length>=this.count){
				this.tips = '所有数据加载完成'
			}else{
				this.page += 1
				this.getUkList()
			}
		},
		
		onLoad: function (option) {
			this.getUkList()
		},
		onShow:function(){
			this.userinfo = uni.getStorageSync('userinfo')?uni.getStorageSync('userinfo'):[],
			this.sharecode = randomString(8);
			
		},
		
		onShareAppMessage(e) {
			var that = this
			if(e.from=='button'){
				if(e.target.id=='share'){
					var index = e.target.dataset.index
					return {
						title: '您的好友给您赠送卡片啦',
						path: "/pages/share_card/index?card_id="+that.list[index].kapai_id+'&share_user_id='+that.userinfo.id+'&type=share&code='+that.sharecode,
						imageUrl:that.list[index].card,
					}
				}
			}
		},
		onShareTimeline(e) {
			var that = this
			if(e.from=='button'){
				if(e.target.id=='share'){
					var index = e.target.dataset.index
					return {
						title: '您的好友给您赠送卡片啦',
						path: "/pages/share_card/index?card_id="+that.list[index].kapai_id+'&share_user_id='+that.userinfo.id+'&type=share&code='+that.sharecode,
						imageUrl:that.list[index].card,
					}
				}
			}
		},
	
		methods:{
			
			shareCard(index){
				shareCard(this.list[index].kapai_id,this.sharecode).then(res=>{
				
				})
			},
			
			getUkList(){
				getUkList(this.page).then(res=>{
					
					console.log(res)
					this.count = res.data.total
					var data = res.data.data
					for(var i = 0 ;i<data.length;i++){
						this.list.push(data[i])
					}
					if(this.list.length>=this.count){
						this.tips = '所有数据加载完成'
					}
				
				})
			},
		}
	}
</script>
<style>
	/* 设置标题字体颜色*/
	.u-navbar__content__title{color: #FFFFFF!important;}
	/*去掉返回按钮 */
	.u-navbar__content__left{display: none!important;}
	.u-transition{width: 100%;height: 100%;}
	
	button::after {
	  border: none;
	}
	button {
	  background-color: #fff!important;
	  border-radius:0;
	  padding: 0!important;
	}
	
</style>
<style scoped>
	.li .sent .count{position: absolute;bottom: 12rpx;width: 140rpx;text-align: center;font-size: 30rpx;color: red;}
	
	.li .sent .btn{height:40rpx;width:80rpx;background-color:#4699FF!important;text-align: center;font-size: 25rpx;color: #FFFFFF;
		border-radius: 20rpx;line-height: 40rpx;}
	.li .sent .btn1{background-color: #c2ccd8!important;}
	.li .sent{position: relative;width: 140rpx;z-index: 2;}
	.li .detail .level{color: red;}
	.li .detail .name{font-size:40rpx;font-weight:bold}
	.li .detail .type{font-size:40rpx;color : #f3ed4d;}
	.li .detail{margin-left:30rpx;width:370rpx;z-index: 2;}
	.li .card{height:200rpx;width: 140rpx;margin-left:30rpx;z-index: 2;}
	.li .bg_img{position: absolute;left: 0;top: 0;height: 260rpx;width: 710rpx;background-repeat: no-repeat;background-position: center;
				background-size: cover;-webkit-filter: blur(10px);-moz-filter: blur(10px);-o-filter: blur(10px);
				-ms-filter: blur(10px);filter: blur(10px);z-index: 1;}
	.li{box-shadow: 0 2px 6px 0 rgb(0 0 0 / 42%);padding: 30rpx 0;border-radius: 10rpx;position: relative;margin-bottom: 30rpx;}
</style>